<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>关于我们</title>
        <link href="favicon.ico" rel="shortcut icon">
        <script src="./js/common/vue.js"></script>
        <script src="js/common/axios.min.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/animation.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/common/main.css">
        <link rel="stylesheet" href="css/about.css">
    </head>
    <body>
        <div id="contn">
            <v-header></v-header>
            <v-main></v-main>
            <v-footer></v-footer>
        </div>
        <template id="vMain">
            <main>
                <div class="heading ready">
                    <img :src="nav.length?nav[curr].imagePath:''" class="obj-c">
                    <div class="ttl fill flex flex-justify-content">
                        <p class="eng delay-1"></p>
                        <p class="chn delay-2">{{nav.length?nav[curr].name:''}}</p>
                    </div>
                </div>
                <nav class="flex flex-justify-content">
                    <a href="javascript:;" @click="funcScrl(i)" v-for="(item,i) in showcase" :class='!i?"active":""'>{{item.name}}</a>
                </nav>
                <div class="showcase fluid" id="about">
                    <div class="content ready">
                        <div class="txt">
                            <div class="ttl">
                                <p class="chn delay-1" v-if="showcase.length">{{showcase[0].description}}</p>
                                <p class="eng delay-2" v-if="showcase.length">{{showcase[0].enName}}</p>
                            </div>
                            <div v-if="showcase.length" class="delay-2 t" v-html="showcase[0].htmlContent"></div>
                        </div>
                        <p class="pic delay-3">
                            <img :src="showcase.length?showcase[0].imagePath:''" class="obj-c">
                        </p>
                    </div>
                </div>
                <div class="showcase fillBf ready" id="culture">
                    <p class="bg fill">
                        <img :src="showcase.length?showcase[1].imagePath:''" class="obj-c">
                    </p>
                    <div class="fluid">
                        <div class="ttl">
                            <p class="chn delay-1">{{showcase.length?showcase[1].name:''}}</p>
                            <p class="eng delay-2">{{showcase.length?showcase[1].enName:''}}</p>
                        </div>
                        <div class="list">
                            <div v-for="(item,i) in culture" class="itm">
                                <p>{{item.split(',')[0]}}</p>
                                <p>{{item.split(',')[1]}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="showcase fluid flex" id="dev">
                    <div class="storeBox" v-if="showcase.length" v-html='showcase[2].htmlContent'></div>
                    <div class="content ready">
                        <div class="ttl" v-if="showcase.length">
                            <p class="chn delay-1">{{showcase[2].name}}</p>
                            <p class="eng delay-2">{{showcase[2].enName}}</p>
                        </div>
                        <div class="history">
                            <p class="prev">&lt;</p>
                            <p class="next">&gt;</p>
                        </div>
                    </div>
                    <p class="picSwp" v-if="showcase.length"><img class="obj-c" :src="showcase[2].imagePath"></p>
                </div>
                <div id="hornor" class="showcase">
                    <div class="fluid">
                        <div class="tips ready flex flex-align-items">
                            <div class="ttl" v-if="showcase.length">
                                <p class="chn delay-1">{{showcase[3].name}}</p>
                                <p class="eng delay-2">{{showcase[3].enName}}</p>
                            </div>
                            <div class="t" v-if="showcase.length" v-html="showcase[3].htmlContent"></div>
                        </div>
                        <div class="hornorSwp swiper-container">
                            <div class="swiper-wrapper">
                                <div class="item swiper-slide" v-for="(item,i) in hornor">
                                    <p class="name">{{item.title}}</p>
                                    <img :src="item.imagePath">
                                </div>
                            </div>
                            <div class="swiper-pagination hornorPagi"></div>
                        </div>
                    </div>
                    
                </div>
                <div id="team" class="fluid ready showcase">
                    <div class="ttl" v-if="showcase.length">
                        <p class="chn delay-1">{{showcase[4].name}}</p>
                        <p class="eng delay-2">{{showcase[4].enName}}</p>
                    </div>
                    <div class="teamSwp swiper-container">
                        <div class="swiper-wrapper">
                            <div class="item swiper-slide" v-for="(item,i) in team">
                                <p class="pic"><img class="fc" :src="item.imagePath"></p>
                                <div class="txt">
                                    <p class="name">{{item.title}}</p>
                                    <div class="des" v-html="item.htmlContent"></div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-pagination teamPagi"></div>
                    </div>
                </div>
            </main>
        </template>

        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            
			var scrollInt = null;
            var hornorSwp,teamSwp;
            var contn = new Vue({
                el:'#contn',
                data:{
                    
                },
                methods:{
                    
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                curr:'',
                                nav:[],
                                showcase:[],
                                culture:[],
                                hornor:[],
                                team:[]
                            }
                        },
                        created:function(){
                            this.writingWeb();
                        },
                        mounted:function(){
                            ifMounted = true;
                        },
                        methods:{
                            funcScrl:function(ind){
								$('main nav a').removeClass('active');
								$('main nav a').eq(ind).addClass('active');
								clearInterval(scrollInt);
                                var final = $('.showcase').eq(ind)[0].getBoundingClientRect().top;
                                final = parseInt(final);
								scrollSec(final);
								function scrollSec(val){
									scrollInt = setInterval(function(){
										var now = document.documentElement.scrollTop || document.body.scrollTop;
										now = parseInt(now);
										if(now > val){
											var v = Math.ceil((now - val) / 15);
											now -= v;
										}else if(now < val){
											var v = Math.ceil((val - now) / 15);
											now += v;
										}
                                        document.documentElement.scrollTop = document.body.scrollTop = now;
										if(now == val || now + window.innerHeight >= document.documentElement.scrollHeight){
											clearInterval(scrollInt);
										}
									},10)
								}
							},
                            writingWeb:function(){
                                //获取导航栏
                                axios.get(dataUrl + 'api/getNavbar',{
                                    headers:{
                                        Authorization: headers
                                    }
                                })
                                .then((res) => {
                                    //console.log(res.data.data);
                                    this.nav = res.data.data;
                                    var nowHref = window.location.href;
                                    for(var c = 1;c < res.data.data.length;c++){
                                        if(nowHref.indexOf(res.data.data[c].visitUrl) >= 0 && res.data.data[c].visitUrl.length){
                                            this.curr = c;
                                            console.log(c);
                                            //获取二级栏目详情
                                            axios.post(dataUrl + 'api/getNavbarDetails',{id:res.data.data[c].id},{
                                                headers:{
                                                    Authorization: headers
                                                }
                                            })
                                            .then((res) => {
                                                console.log(res.data.data);
                                                this.showcase = res.data.data;
                                                this.culture = this.showcase[1].description.split(';');
                                                setTimeout(function(){
                                                    for(var p = 0;p < $('#dev .storeBox li').length;p++){
                                                        var itm = $('<div></div>').addClass('itm');
                                                        if(!($('#dev .storeBox li').length - 1 - p)){
                                                            itm.addClass('active');
                                                        }
                                                        itm.html($('#dev .storeBox li')[$('#dev .storeBox li').length - p - 1].innerHTML);
                                                        $('#dev .content .history').prepend(itm);
                                                    }
                                                    var max = $('#dev .content .history .itm').height();
                                                    for(var c = 0;c < $('#dev .content .history .itm').length;c++){
                                                        var h = $('#dev .content .history .itm').eq(c).height();
                                                        if(h >= max){
                                                            max = h;
                                                            $('#dev .content .history .itm').removeClass('max');
                                                            $('#dev .content .history .itm').eq(c).addClass('max');
                                                        }
                                                    }
                                                    $('#dev .content .history>p').click(function(){
                                                        var curr = $('#dev .content .history .itm.active').index();
                                                        var newNow;
                                                        var length = $('#dev .content .history .itm').length;
                                                        if($(this)[0].className.indexOf('prev') >= 0){
                                                            if(!curr){
                                                                newNow = length - 1;
                                                            }else{
                                                                newNow = (curr - 1);
                                                            }
                                                        }else{
                                                            if(curr == length - 1){
                                                                newNow = 0;
                                                                
                                                            }else{
                                                                newNow = (curr + 1);
                                                            }
                                                        }
                                                        $('#dev .content .history .itm').removeClass('active');
                                                        $('#dev .content .history .itm').eq(newNow).addClass('active');
                                                    })
                                                },10)
                                            })
                                            break;
                                        }
                                    }
                                    var This = this;
                                    setTimeout(function(){
                                        var enAry = This.nav[This.curr].enName.split(' ');
                                        for(var t = 0;t < enAry.length;t++){
                                            var txt = enAry[t];
                                            var fstLtr = txt[0];
                                            txt = txt.substring(1);
                                            console.log(txt);
                                            var em = '<em>' + fstLtr + '</em>' + txt;
                                            var span = $('<span></span>').html(em);
                                            if(t){
                                                $('.heading .ttl .eng').append(' ');
                                            }
                                            $('.heading .ttl .eng').append(span);
                                        }
                                    },10)
                                });

                                //hornor
                                axios.post(dataUrl + 'api/v2/getArchivesDetails',{ext06:0,id:42,size:100,page:1},{
                                    headers:{
                                        Authorization: headers
                                    }
                                })
                                .then((res) => {
                                    this.hornor = res.data.data.list;
                                    setTimeout(function(){
                                        hornorSwp = new Swiper('.hornorSwp',{
                                            slidesPerView: 4,
                                            slidesPerColumn: 2,
                                            slidesPerGroup : 4,
                                            spaceBetween:35,
                                            slidesPerGroupSkip:0,
                                            slidesPerColumnFill:"column",
                                            pagination: {
                                                el: '.hornorPagi',
                                                clickable:true
                                            },
                                            breakpoints:{
                                                1600:{
                                                    spaceBetween:30
                                                },
                                                1200:{
                                                    spaceBetween:20
                                                },
                                                1024:{
                                                    slidesPerView: 2,
                                                    slidesPerGroup: 1,
                                                },
                                                767:{
                                                    spaceBetween:25,
                                                    slidesPerView: 1,
                                                    slidesPerGroup: 1,
                                                }
                                            }
                                        })
                                    },10)
                                })

                                //team
                                axios.post(dataUrl + 'api/v2/getArchivesDetails',{ext06:0,id:43,size:100,page:1},{
                                    headers:{
                                        Authorization: headers
                                    }
                                })
                                .then((res) => {
                                    this.team = res.data.data.list;
                                    setTimeout(function(){
                                        teamSwp = new Swiper('.teamSwp',{
                                            slidesPerView: 4,
                                            slidesPerColumn: 2,
                                            slidesPerGroup : 4,
                                            spaceBetween:50,
                                            slidesPerGroupSkip:0,
                                            slidesPerColumnFill:"column",
                                            pagination: {
                                                el: '.teamPagi',
                                                clickable:true
                                            },
                                            breakpoints:{
                                                1600:{
                                                    spaceBetween:35
                                                },
                                                1200:{
                                                    spaceBetween:25
                                                },
                                                1024:{
                                                    slidesPerView:2,
                                                    slidesPerGroup: 1,
                                                },
                                                767:{
                                                    slidesPerView: 1,
                                                    slidesPerColumn: 1,
                                                    slidesPerGroup: 1,
                                                    spaceBetween:25,
                                                }
                                            }
                                        })
                                    },10)
                                })
                            }
                        }
                    },
                },
            })
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/about.js"></script>
    </body>
</html>